// 诉状
Vue.component('ht-info', {
    name:'ht-info',
    template: `
         <el-drawer
                :visible.sync="show"
                size="95%"
                :with-header="false"
                custom-class="ht-drawer-bg"
                :append-to-body="true"
                :destroy-on-close="true"
            >
            <div class="ht-drawer-main" v-if="info.id">
                <el-page-header @back="goBack" title="Esc返回" content="详情信息"></el-page-header>
                <el-descriptions title="基本信息"  direction="vertical" :column="5" border style="margin-top: 10px;">
                    <el-descriptions-item label="公证日期">{{info.gong_time}}</el-descriptions-item>
                    <el-descriptions-item label="购买日期">{{info.buy_day}}</el-descriptions-item>
                    <el-descriptions-item label="序号">{{info.no}}</el-descriptions-item>
                    <el-descriptions-item label="案由">{{info.why}}</el-descriptions-item>
                    <el-descriptions-item label="案件来源">{{info.region}}</el-descriptions-item>
                    <el-descriptions-item label="店铺名称">{{info.shop_title}}</el-descriptions-item>
                    <el-descriptions-item label="发货地址/际地址/处罚单位/处罚案号">{{info.real_address}}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{info.bz}}</el-descriptions-item>
                    <el-descriptions-item label="排">{{info.sort}}</el-descriptions-item>
                    <el-descriptions-item label="买">{{info.buy}}</el-descriptions-item>
                    
                    <el-descriptions-item label="购买物品">{{info.goods}}</el-descriptions-item>
                    <el-descriptions-item label="总价">{{info.buy_money}}</el-descriptions-item>
                    <el-descriptions-item label="购买时间">{{info.buy_time}}</el-descriptions-item>
                    <el-descriptions-item label="付款方式">{{info.buy_type}}</el-descriptions-item>
                    <el-descriptions-item label="辅证">{{info.other}}</el-descriptions-item>
                    <el-descriptions-item label="订单编号" v-if="info.is_online == 1">{{info.order_no}}</el-descriptions-item>
                    <el-descriptions-item label="物流编号" v-if="info.is_online == 1">{{info.express_no}}</el-descriptions-item>
                    <el-descriptions-item label="收货地址" v-if="info.is_online == 1">{{info.address}}</el-descriptions-item>
                    <el-descriptions-item label="销量/店铺规模/现场情况/罪名">{{info.shop_size}}</el-descriptions-item>
                </el-descriptions>
                <div class="ht-title">主体信息</div>
                <el-table :data="info.main" border header-row-class-name="ht-table-header">
                    <el-table-column prop="shop_card" align="center" label="证照"></el-table-column>
                    <el-table-column prop="shop_name" align="center"  label="主体名称"></el-table-column>
                    <el-table-column prop="shop_address" align="center"  label="注册地址"></el-table-column>
                    <el-table-column prop="name" align="center"  label="经营者"></el-table-column>
                    <el-table-column prop="tel" align="center"  label="联系方式"></el-table-column>
                    <el-table-column prop="id_card" align="center"  label="证件号"></el-table-column>
                </el-table>

                <div class="ht-title">文件信息</div>
                    <el-table :data="tableData" border header-row-class-name="ht-table-header"
                                  ref="dataTable" @selection-change="handleSelectChange" row-key="title">
                            <el-table-column align="center" type="selection" width="39"></el-table-column>
                            <el-table-column prop="name" label="类型" width="100px" align="center">
                                <template slot-scope="scope">
                                    <ht-table-image :value="scope.row"></ht-table-image>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="title" label="证据名称"></el-table-column>
                            <el-table-column align="center" prop="projectItem.shop_title" label="所属案件"></el-table-column>
                            <el-table-column align="center" prop="create_time" width="120" label="添加时间"></el-table-column>
                            <el-table-column align="center" label="操作" width="180">
                                <template slot-scope="scope">
                                    <el-link size="mini" type="primary" @click="showImage(scope.row)">预览</el-link>
                                </template>
                            </el-table-column>
                    </el-table>
                    <div class="ht-main-page">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="page"
                                :page-sizes="[1,10, 200, 300, 400]"
                                :page-size="limit"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
         </el-drawer>
    `,
    props: {
        info:{
            type:Object,
            default:()=>{
                return {
                    proof:{},
                    main:[]
                }
            }
        },
        show:{
            type:Boolean,
            default:false
        },
    },
    data() {
        return {
            tableData:[],
            total: 0,
            page: 1,
            limit: 10,
        }
    },
    created() {
        console.log(this.info)
    },
    methods: {
        goBack(){
            this.$emit('update:show',false)
            console.log('conse')
        },
        showImage(row) {
            if (['.jpg', '.bmp', '.gif', '.png','.webp','.jpeg'].indexOf(row.ext) !== -1) {
                top.showImg(row.path)
            }
            if (['.mp3','.mp4'].indexOf(row.ext) !== -1) {
                top.showImg('<video controls src="'+row.path+'">',"html")
            }
            if (['.xls', '.xlsx', '.doc', '.docx','.ppt','.pptx',".pdf"].indexOf(row.ext) !== -1) {
                window.open("/wps/index/index/file_id/" + row.file_id)
            }
        },
        getInfo() {
            let vs = this
            if (!vs.info.id) return;
            Api.request('/admin/lawyer.project_files/index',{
                page:vs.page,
                search_key: {project_item_id:vs.info.id},
            }).then(res=>{
                vs.tableData = res.data.data
                vs.total = res.data.total
            })
        },
        handleSizeChange: function (e) {
            this.limit = e
        },
        handleCurrentChange: function (e) {
            this.page = e
        }
    },
    watch: {
        page() {
            this.getData()
        },
        limit() {
            this.getData()
        },
        "info.id": function (val) {
            if(val){
                console.log(val)
                this.getInfo()
            }
        }
    }
})